<!--充值明细列表-->
<template>
    <div class="rechargeList">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="充值明细"
                    left-arrow
                    @click-left="toBack">
            </van-nav-bar>
        </div>
        <div class="position-relative">
            <div class="datePicker">
                <van-datetime-picker v-show="datePicker" v-model="currentDate" type="year-month" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" @cancel="cancelPicker"/>
            </div>
        </div>
        <div class="payIncome">
            <div>
                <van-cell :value="dateStr" @click="chooseDate" />
            </div>
            <div class="expenditure font-size-13-pk text-light-pk">
                <span class="money">充值</span><span>￥{{allMoney}}</span>
            </div>
        </div>
        <div class="pad-top-page">
        </div>
        <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh" ref="">
            <van-list
                    ref=""
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="onLoad">
                <div v-if="this.rechargeList.length>0" class="balanceList bg-white-pk page-pad-pk ">
                    <div v-for="(item,k) in rechargeList"
                         :key="k"
                         @click="rechargeDetail(item)"
                         class="d-flex-pk balanceItem light-border-bottom-pk">
                        <div class="itemLeft">
                            <div class="text-black-pk font-size-15-pk">
                                {{item.title}}
                            </div>
                            <div class="text-light-pk font-size-12-pk">{{item.createTime}}</div>
                        </div>
                        <div class="money">
                            +{{item.money}}
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                dateStr: "",//uni app 组件时间格式
                datePicker:false,
                minDate: new Date(2016, 0, 1),
                maxDate: new Date(),
                currentDate: new Date(),
                rechargeList:[],
                allMoney:0.0,// 充值
                page: this.$global.page,
                size: this.$global.size,
                pages:  this.$global.pages,
                pageNum: 1,
                total:0,
                isRefreshing: false,//上拉刷新
                loading: false,
                finished: false,
            }
        },

        created() {
            this.initDate();
            this.getRechargeList();
        },
        methods:{
            toBack(){
                this.$router.push({
                    name:"recharge"
                })
            },
            initDate(){
                this.dateStr = this.dateToUniApp(new Date());
                this.dateStr=this.dateShowStrFmt(this.dateStr)
            },
            getRechargeList(type){
                this.$api.getRechargeList({
                    page:this.page,
                    size: this.size,
                    date:this.currentDate
                }).then(res=>{
                    this.$toast.clear();
                    this.loading=false;
                    let result=this.$resData(res);
                    if(result && result.resultPage){
                        let listRes = result.resultPage;
                        this.total = parseInt(listRes.total);
                        this.pageNum = listRes.pageNum;
                        this.pages = listRes.pages;
                        this.allMoney=result.allMoney;
                        if(type==='load'){
                            this.rechargeList=this.rechargeList.concat(listRes.list)
                        }else{
                            this.rechargeList=listRes.list;
                        }
                        this.onLoad()
                    }
                })
            },
            //上拉刷新
            onRefresh() {
                this.$toast.loading({
                    message: "加载中...",
                });
                this.page = 1;
                this.size = this.$global.size;
                this.getRechargeList("load");
                this.isRefreshing = false
            },
            //下拉加载
            onLoad() {
                if(this.page >= this.pages) {
                    this.finished = true
                }else {
                    this.page ++;
                    this.getRechargeList("load")
                }
            },
            //详情
            rechargeDetail(item) {
                this.$router.push({
                    name:"rechargeDetail",
                    params:{
                        queryStr:encodeURI(JSON.stringify(item))
                    }
                })
            },
            chooseDate(){
                this.datePicker=!this.datePicker;
                this.currentDate=new Date()
            },
            //时间转换
            dateToUniApp(date) {
                if(date) {
                    return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
                }
            },
            //页面显示
            dateShowStrFmt(dateStr) {
                let dateArr = dateStr.split("-");
                let date = new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
                let year = date.getFullYear();
                let month = date.getMonth()+ 1;
                return `${year}年${month}月`
            },
            formatDate(dateStr) {
                return `${dateStr.getFullYear()}年${dateStr.getMonth()+1}月`;
            },
            //用于后端请求
            strToDate(dateStr) {
                let dateArr = dateStr.split("-");
                return new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
            },
            onConfirm(date) {
                this.datePicker = false;
                this.dateStr = this.formatDate(date)
                this.currentDate=date;
                this.page = 1;
                this.size = this.$global.size;
                this.getRechargeList()
            },
            cancelPicker(){
                this.datePicker=false;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .rechargeList{
        line-height: 1.8;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .pad-top-page{
            padding-top: 9em;
        }
        .payIncome{
            position: fixed;
            z-index: 999;
            left: 0;
            right: 0;
            top: 3.2em;
        }
        .position-relative{
            position: relative;
            .datePicker{
                position: fixed;
                top: 30em;
                left: 0;
                right: 0;
                z-index: 999;
            }

        }
        .expenditure{
            background-color: #F5F5F5;
            padding:5px 13px;
            .money{
                padding-right: 10px;
            }
        }
        .noneData{
            padding: 5px;
        }
        .balanceList{
            padding-top: 5px;
            align-items: center;
            .balanceItem{
                align-items: center;
                padding: 5px 0;
            }
            .itemLeft{
                flex-grow: 1;
            }
            .money{
                font-size: 25px;
                color: #0C9609;;
            }
        }
    }

</style>
